<!DOCTYPE html>
<html>

<head>
    <title>生成图标</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        
        .container {
            display: flex;
            flex-direction: row;
            gap: 32px;
        }
        
        .left-panel {
            flex: 1;
            min-width: 300px;
            max-width: 500px;
        }
        
        .right-panel {
            flex: 1;
            min-width: 300px;
        }
        
        canvas {
            border: 1px solid #ccc;
            margin: 10px;
        }
        
        .icon-set {
            margin: 20px 0;
        }
        
        textarea {
            width: 100%;
            box-sizing: border-box;
            font-family: monospace;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <h1>图标生成器</h1>

    <div class="container">
        <div class="left-panel">
            <h3>粘贴你的 SVG 代码：</h3>
            <textarea id="svgInput" rows="18"></textarea>
            <button onclick="updateIcons()" style="margin-top:10px;">生成图标</button>
        </div>
        <div class="right-panel">
            <div class="icon-set">
                <h3>16x16 图标</h3>
                <canvas id="icon16" width="16" height="16"></canvas>
                <button onclick="downloadIcon('icon16', 'icon16.png')">下载 16x16</button>
            </div>
            <div class="icon-set">
                <h3>48x48 图标</h3>
                <canvas id="icon48" width="48" height="48"></canvas>
                <button onclick="downloadIcon('icon48', 'icon48.png')">下载 48x48</button>
            </div>
            <div class="icon-set">
                <h3>128x128 图标</h3>
                <canvas id="icon128" width="128" height="128"></canvas>
                <button onclick="downloadIcon('icon128', 'icon128.png')">下载 128x128</button>
            </div>
        </div>
    </div>

    <script>
        let svgData = ''; // 用于保存当前 SVG

        function drawIconOnCanvas(canvasId, size, svgString) {
            const canvas = document.getElementById(canvasId);
            const ctx = canvas.getContext('2d');
            const img = new Image();

            const svgBlob = new Blob([svgString], {
                type: 'image/svg+xml'
            });
            const url = URL.createObjectURL(svgBlob);

            img.onload = function() {
                ctx.clearRect(0, 0, size, size);
                ctx.drawImage(img, 0, 0, size, size);
                URL.revokeObjectURL(url);
            };

            img.src = url;
        }

        function updateIcons() {
            svgData = document.getElementById('svgInput').value;
            if (!svgData.trim()) {
                alert('请粘贴 SVG 代码！');
                return;
            }
            drawIconOnCanvas('icon16', 16, svgData);
            drawIconOnCanvas('icon48', 48, svgData);
            drawIconOnCanvas('icon128', 128, svgData);
        }

        function downloadIcon(canvasId, filename) {
            const canvas = document.getElementById(canvasId);
            const link = document.createElement('a');
            link.download = filename;
            link.href = canvas.toDataURL('image/png');
            link.click();
        }

        // 页面加载时可填入一个默认 SVG
        window.onload = function() {
            const defaultSVG = `<svg width="128" height="128" ...>...</svg>`; // 你可以放一个默认 SVG
            document.getElementById('svgInput').value = defaultSVG;
            svgData = defaultSVG;
            updateIcons();
        };
    </script>

    <div style="margin-top: 40px; padding: 20px; background: #f5f5f5; border-radius: 8px;">
        <h3>使用说明：</h3>
        <ol>
            <li>在浏览器中打开此文件</li>
            <li>等待图标生成完成</li>
            <li>点击对应的下载按钮保存 PNG 文件</li>
            <li>将下载的文件重命名并放入 icons/ 文件夹</li>
        </ol>
        <p><strong>注意：</strong> 下载后请将文件重命名为 icon16.png, icon48.png, icon128.png</p>
    </div>
</body>

</html>